<template>
  <div class="box-show">
    <div class="z gonggao">
      <div class="title">
        存储设置
      </div>
      <div class="gg-left">
        <el-row>
          <el-col :span="24">
            <el-form
              size="mini"
              :model="ruleFrom"
              ref="ruleFrom"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="选择存储" style="text-align: left">
                <el-radio-group v-model="ruleFrom.type">
                  <el-radio :label="0">本地存储</el-radio>
                  <el-radio :label="1">七牛云存储</el-radio>
                </el-radio-group>
              </el-form-item>

              <template v-if="ruleFrom.type == 1">
                <div
                  style="font-size: 12px;color: #666666;text-align: left;padding: 20px;background-color: #fef1eb;margin-bottom: 20px;border-radius: 5px"
                >
                  说明：<br />
                  启用七牛云存储后，请把/attachment目录（不包括此目录）下的子文件及子目录上传至七牛云存储,
                  相关工具：七牛云存储
                </div>

                <el-row>
                  <el-col :span="10">
                    <el-form-item
                      label="Accesskey"
                      prop="qn_accesskey"
                      :rules="[
                        { required: true, message: 'Accesskey不能为空' }
                      ]"
                    >
                      <el-input
                        type="text"
                        v-model="ruleFrom.qn_accesskey"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="14"
                    style="text-align: left;padding-top: 5px;padding-left: 10px;font-size: 12px;color: #999999"
                  >
                    用于签名的公钥
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item
                      label="Secretkey"
                      prop="qn_secretkey"
                      :rules="[
                        { required: true, message: 'Secretkey不能为空' }
                      ]"
                    >
                      <el-input
                        type="password"
                        v-model="ruleFrom.qn_secretkey"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="14"
                    style="text-align: left;padding-top: 5px;padding-left: 10px;font-size: 12px;color: #999999"
                  >
                    用于签名的私钥
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item
                      label="Bucket"
                      prop="qn_bucket"
                      :rules="[{ required: true, message: 'Bucket不能为空' }]"
                    >
                      <el-input
                        type="text"
                        v-model="ruleFrom.qn_bucket"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="14"
                    style="text-align: left;padding-top: 5px;padding-left: 10px;font-size: 12px;color: #999999"
                  >
                    请保证bucket为可公共读取的
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="10">
                    <el-form-item
                      label="Url"
                      prop="qn_url"
                      :rules="[{ required: true, message: 'Url不能为空' }]"
                    >
                      <el-input
                        type="text"
                        v-model="ruleFrom.qn_url"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="14"
                    style="text-align: left;padding-top: 5px;padding-left: 10px;font-size: 12px;color: #999999"
                  >
                    七牛支持用户自定义访问域名。注：url开头加http://或https://结尾不加
                    ‘/’例：http://abc.com
                  </el-col>
                </el-row>
              </template>

              <el-form-item style="text-align: left">
                <el-button
                  type="primary"
                  size="mini"
                  @click="submitForm('ruleFrom')"
                  >提交</el-button
                >
                <!--                <el-button-->
                <!--                  type="success"-->
                <!--                  size="mini"-->
                <!--                  @click="memorytest('ruleFrom')"-->
                <!--                  >测试配置(无需保存)</el-button-->
                <!--                >-->
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  memory_getInfoByUniacid,
  memory_update,
  memory_memorytest
} from "@/utils/do";
export default {
  name: "CloudSetting",
  props: {},
  data() {
    return {
      ruleFrom: {}
    };
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    // 提交测试
    memorytest(ruleFrom) {
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      this.$refs[ruleFrom].validate(valid => {
        if (valid) {
          memory_memorytest(_this.ruleFrom, res => {
            _this.$store.commit("setIsLoading", false);
            console.log("测试结果", res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 方法
    submitForm(ruleFrom) {
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      this.$refs[ruleFrom].validate(valid => {
        if (valid) {
          memory_update(_this.ruleFrom, res => {
            _this.$store.commit("setIsLoading", false);
            res.code == 0
              ? _this.$message.success("存储配置更新成功")
              : _this.$message.error(res.msg);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getInfoByUniacid() {
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      memory_getInfoByUniacid(res => {
        _this.$store.commit("setIsLoading", false);
        if (res.code == 0) {
          _this.ruleFrom = res.date;
        } else {
          _this.$message.error(res.msg);
        }
      });
    }
  },
  mounted() {
    this.getInfoByUniacid();
  }
};
</script>

<style scoped>
@import "~@/assets/scss/index.css";
</style>
